<template>
	<view class="fun-flex-col page">
		<view class="fun-flex-col fun-justify-start fun-self-start text-wrapper">
			<text class="font text_3">Hello, how can I help you today?</text>
		</view>
		<view class="fun-flex-col fun-justify-start fun-self-end text-wrapper_2">
			<text class="font text_4">Could you please help me check the progress of this transaction for me?</text>
		</view>
		<view class="fun-flex-col fun-justify-start fun-items-center fun-self-start image-wrapper">
			<image class="image_5" src="../../../static/3a69db502114a0a6cad4da610c09eff3.png" />
		</view>
		<view class="fun-flex-row fun-justify-between fun-items-center fun-self-stretch section">
			<input class="font" type='text' placeholder="Please enter your question." />
			<image class="image_6" src="../../../static/a248a48dcc9b8368c33353b89f5899c2.png" />
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {};
		},

		methods: {},
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.page {
		padding: 36rpx 32rpx 84rpx;
		background-color: #00033b;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group {
			padding-left: 36rpx;

			.text {
				color: #ffffff;
				font-size: 30rpx;
				font-family: SF Pro Text;
				font-weight: 600;
				line-height: 22.18rpx;
			}

			.image {
				width: 34rpx;
				height: 22rpx;
			}

			.image_2 {
				width: 30rpx;
				height: 22rpx;
			}

			.image_3 {
				width: 48rpx;
				height: 22.66rpx;
			}
		}

		.group_2 {
			margin-top: 52rpx;
			padding: 12rpx 0;

			.image_4 {
				width: 48rpx;
				height: 48rpx;
			}

			.pos {
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}

			.text_2 {
				color: #ffffff;
				font-size: 32rpx;
				font-family: SF Pro Display;
				font-weight: 300;
				line-height: 23.26rpx;
			}
		}

		.text-wrapper {
			margin-top: 46rpx;
			padding: 32rpx 0 28rpx;
			background-color: #1b1d53;
			border-radius: 24rpx 24rpx 24rpx 0rpx;
			backdrop-filter: blur(13.8rpx);
			width: 404rpx;

			.text_3 {
				margin-left: 24rpx;
				margin-right: 16rpx;
			}
		}

		.text-wrapper_2 {
			margin-right: 4rpx;
			margin-top: 48rpx;
			padding: 32rpx 0 24rpx;
			background-image: linear-gradient(240.4deg, #f5798f 0.5%, #a544fa 50.1%, #80c1e6 99.6%);
			border-radius: 24rpx 24rpx 0rpx 24rpx;
			width: 588rpx;

			.text_4 {
				margin-left: 24rpx;
				margin-right: 40rpx;
				line-height: 28rpx;
			}
		}

		.font {
			font-size: 24rpx;
			font-family: PingFang SC;
			line-height: 22.22rpx;
			color: #ffffff;
		}

		.image-wrapper {
			margin-top: 48rpx;
			padding: 36rpx 0;
			background-color: #1b1d53;
			border-radius: 24rpx 24rpx 24rpx 0rpx;
			backdrop-filter: blur(13.8rpx);
			width: 162rpx;

			.image_5 {
				width: 94rpx;
				height: 12rpx;
			}
		}

		.section {
			position: fixed;
			bottom: 0;
			width: calc(100% - 32px);
			left: 16px;
			margin-right: 4rpx;
			padding: 18rpx 18rpx 18rpx 32rpx;
			background-color: #1b1d53;
			border-radius: 50rpx;

			.image_6 {
				border-radius: 50%;
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
</style>